
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="CodePen">
 <link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
 <body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" class="svg-defs">
  <defs>

    <pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
      <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/pattern_141.gif" width="100" height="100" preserveAspectRatio="none"></image>
    </pattern>

    <g id="shape-butterfly-1">
      <path class="path" fill="" clip-rule="evenodd" d="M8.65,2.85c0.934-0.2,2.15-0.333,3.65-0.4c1.534-0.1,2.667-0.083,3.4,0.05
		c1.533,0.267,3.45,0.767,5.75,1.5c2.466,0.8,4.35,1.617,5.65,2.45c2.066,1.2,3.883,2.383,5.45,3.55c2.567,2.1,4.35,3.8,5.35,5.1
		l2.1,2.5c0.933,1.167,1.517,1.983,1.75,2.45c0.333,0.767,1.083,2.117,2.25,4.05c0.233,0.467,0.717,1.683,1.45,3.65
		c0.733,2.067,1.2,3.45,1.4,4.15c0.467,1.733,0.917,3.767,1.35,6.1l0.4,3.85l-0.25-3.4c-0.6-5.967-1.267-10.25-2-12.85
		c-0.733-2.434-2.167-5.467-4.3-9.1c-0.966-1.667-1.566-3-1.8-4c-0.233-0.933-0.1-1.267,0.4-1c1.3,0.733,2.917,3.867,4.85,9.4
		c1.667,4.7,2.85,11.2,3.55,19.5c0.567,6.934,0.667,11.917,0.3,14.95l0.2,0.05c0.231,0,0.348-0.05,0.35-0.15v0.05l0.1,0.05v27.4
		c-0.032-0.018-0.065-0.035-0.1-0.05v-0.05c-0.7,0.267-0.983,0.117-0.85-0.45c0.067-0.333,0.017-0.817-0.15-1.45
		c-0.2-0.6-0.316-0.983-0.35-1.15l-0.5-1.65c-0.533-2.967-0.833-5.034-0.9-6.2c-0.1-1.533-0.133-2.4-0.1-2.6
		c0-0.933,0.167-1.667,0.5-2.2c0.567-0.9,0.684-1.75,0.35-2.55c-0.167-0.367-0.367-0.6-0.6-0.7c-0.333-0.133-0.517,0.283-0.55,1.25
		c-0.033,1.533-0.167,2.9-0.4,4.1c-0.1,2.3-0.267,3.684-0.5,4.15c-0.333,0.667-1.25,2.95-2.75,6.85c-1.167,2.8-2.233,4.817-3.2,6.05
		c-0.9,1.2-1.583,2.1-2.05,2.7c-0.8,1-1.434,1.667-1.9,2c-2.067,1.333-3.633,2.067-4.7,2.2c-3.033,0.267-4.95,0.317-5.75,0.15
		c-0.8-0.167-1.383-0.217-1.75-0.15c-0.533,0.1-1.033,0.45-1.5,1.05c-0.5,0.667-1.217,1.284-2.15,1.85
		c-0.934,0.567-1.85,0.934-2.75,1.1c-2.467,0.433-4.45,0.25-5.95-0.55c-0.7-0.4-1.467-1.15-2.3-2.25c-0.6-0.867-1.033-1.567-1.3-2.1
		c-0.267-0.667-0.483-1.483-0.65-2.45c-0.3-1.467-0.383-2.717-0.25-3.75c0.267-1.9,0.45-3.05,0.55-3.45
		c0.233-1.233,0.566-2.333,1-3.3C9.25,77.45,9.767,76.4,10,76c0.667-1.233,1.55-2.583,2.65-4.05c1.1-1.434,2.184-2.583,3.25-3.45
		c0.367-0.3,1.15-0.867,2.35-1.7c0.767-0.566,1.917-1.25,3.45-2.05c1.733-0.933,3.267-1.633,4.6-2.1
		c2.133-0.733,4.534-1.467,7.2-2.2c0.467-0.1,1.517-0.3,3.15-0.6c0.967-0.233,0.4-0.4-1.7-0.5c-2.434-0.1-4.534-0.3-6.3-0.6
		c-1.566-0.267-3.383-0.7-5.45-1.3c-2.8-0.8-4.467-1.317-5-1.55c-1.567-0.667-3.2-1.75-4.9-3.25c-1.733-1.533-3-3.1-3.8-4.7
		c-0.533-1.067-0.967-2.434-1.3-4.1c-0.233-1.067-0.3-2.133-0.2-3.2c0.133-0.833,0.183-1.3,0.15-1.4v-0.6
		c-2.467-3.233-3.983-5.433-4.55-6.6c-0.533-1.033-0.883-1.833-1.05-2.4c-0.3-0.867-0.466-1.85-0.5-2.95
		c-0.033-2.367,0.034-4.117,0.2-5.25c0.3-1.034,0.483-1.8,0.55-2.3c0.167-0.867,0.034-1.533-0.4-2c-0.6-0.7-1.133-1.517-1.6-2.45
		c-0.566-1.133-0.833-2.117-0.8-2.95c0.033-1.333,0.167-2.367,0.4-3.1c0.367-1.267,1.05-2.267,2.05-3
		C4.417,4.25,6.483,3.317,8.65,2.85z"/>
    <g>

  </defs>
</svg>
 
<section class="background"></section>

<section class="scene3d">

  <div class="cube skybox">
    <var class="scale">
    <figure class="face front"></figure>
    <figure class="face back"></figure>
    <figure class="face right"></figure>
    <figure class="face left"></figure>
    <figure class="face top"></figure>
    <figure class="face bottom"></figure>
    </var>
  </div>

  <div class="butterfly_container">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100" class="icon shape-codepen">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

  <div class="butterfly_container" 
       style="margin-top: -150px; margin-left: 140px;
              -webkit-animation-duration: 5s;
              -moz-animation-duration: 5s;
              -ms-animation-duration: 5s;
              -o-animation-duration: 5s;
              animation-duration: 5s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .75s;
                  -moz-animation-duration: .75s;
                  -ms-animation-duration: .75s;
                  -o-animation-duration: .75s;
                  animation-duration: .75s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .75s;
                  -moz-animation-duration: .75s;
                  -ms-animation-duration: .75s;
                  -o-animation-duration: .75s;
                  animation-duration: .75s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

  <div class="butterfly_container scale_half" 
       style="margin-top: -10px; margin-left: 50px;
              -webkit-animation-duration: 5s;
              -moz-animation-duration: 5s;
              -ms-animation-duration: 5s;
              -o-animation-duration: 5s;
              animation-duration: 5s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .75s;
                  -moz-animation-duration: .75s;
                  -ms-animation-duration: .75s;
                  -o-animation-duration: .75s;
                  animation-duration: .75s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .75s;
                  -moz-animation-duration: .75s;
                  -ms-animation-duration: .75s;
                  -o-animation-duration: .75s;
                  animation-duration: .75s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

  <div class="butterfly_container scale_half" 
       style="margin-top: 20px;
              -webkit-animation-duration: 20s;
              -moz-animation-duration: 20s;
              -ms-animation-duration: 20s;
              -o-animation-duration: 20s;
              animation-duration: 20s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: 1s;
                  -moz-animation-duration: 1s;
                  -ms-animation-duration: 1s;
                  -o-animation-duration: 1s;
                  animation-duration: 1s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: 1s;
                  -moz-animation-duration: 1s;
                  -ms-animation-duration: 1s;
                  -o-animation-duration: 1s;
                  animation-duration: 1s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

  <div class="butterfly_container scale_half" 
       style="margin-top: 100px; margin-left: 50px;
              -webkit-animation-duration: 20s;
              -moz-animation-duration: 20s;
              -ms-animation-duration: 20s;
              -o-animation-duration: 20s;
              animation-duration: 20s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: 1.2s;
                  -moz-animation-duration: 1.2s;
                  -ms-animation-duration: 1.2s;
                  -o-animation-duration: 1.2s;
                  animation-duration: 1.2s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: 1.2s;
                  -moz-animation-duration: 1.2s;
                  -ms-animation-duration: 1.2s;
                  -o-animation-duration: 1.2s;
                  animation-duration: 1.2s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

  <div class="butterfly_container scale_third" 
       style="margin-top: 150px;
              -webkit-animation-duration: 20s;
              -moz-animation-duration: 20s;
              -ms-animation-duration: 20s;
              -o-animation-duration: 20s;
              animation-duration: 20s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .35s;
                  -moz-animation-duration: .35s;
                  -ms-animation-duration: .35s;
                  -o-animation-duration: .35s;
                  animation-duration: .35s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .35s;
                  -moz-animation-duration: .35s;
                  -ms-animation-duration: .53s;
                  -o-animation-duration: .35s;
                  animation-duration: .35s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

  <div class="butterfly_container scale_third" 
       style="margin-top: -250px; margin-left: 300px; 
              -webkit-animation-duration: 4s;
              -moz-animation-duration: 4s;
              -ms-animation-duration: 4s;
              -o-animation-duration: 4s;
              animation-duration: 4s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .45s;
                  -moz-animation-duration: .45s;
                  -ms-animation-duration: .45s;
                  -o-animation-duration: .45s;
                  animation-duration: .45s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .45s;
                  -moz-animation-duration: .45s;
                  -ms-animation-duration: .45s;
                  -o-animation-duration: .45s;
                  animation-duration: .45s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

</section>

</body>
<style>
.init-button {
  position: fixed;
  left: 5px;
  top: 5px;
}

.container {
  margin: 0 auto;
  height: 100%;
  width: 588px;
  min-width: 588px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container .top-row {
  display: flex;
  position: relative;
  z-index: 2;
}
.container .top-row .note-group {
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 52px;
}
.container .top-row .note-group.group-of-two {
  width: 60px;
}
.container .top-row .note-group.group-of-three {
  width: 93px;
}
.container .top-row .note-group.group-1 {
  margin-left: 17px;
}
.container .top-row .note-group.group-2 {
  margin-left: 36px;
}
.container .top-row .note-group.group-3 {
  margin-left: 42px;
}
.container .top-row .note-group.group-4 {
  margin-left: 39px;
}
.container .top-row .note-group.group-5 {
  margin-left: 38px;
}
.container .top-row .note {
  margin-top: auto;
}
.container .bottom-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.container .bottom-row .note > div {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.note {
  width: 27px;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 14px;
  color: #333333;
  text-align: center;
  perspective: 200px;
  user-select: none;
}
.note > div {
  background-image: linear-gradient(-180deg, #E9D5D0 0%, #E6E5F2 98%);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.26);
  border-radius: 3px;
  width: 100%;
  height: 100%;
  padding: 8px 0;
  box-sizing: border-box;
  transform-origin: top center;
}
.note:hover > div {
  background-image: linear-gradient(-180deg, #E3C377 3%, #ADDC9D 98%);
  transform: rotateX(-5deg);
}
.note.note-1 {
  height: 183px;
}
.note.note-2 {
  height: 178px;
}
.note.note-3 {
  height: 168px;
}
.note.note-4 {
  height: 163px;
}
.note.note-5 {
  height: 153px;
}
.note.note-6 {
  height: 148px;
}
.note.note-7 {
  height: 143px;
}
.note.note-8 {
  height: 133px;
}
.note.note-9 {
  height: 128px;
}
.note.note-10 {
  height: 118px;
}
.note.note-11 {
  height: 113px;
}
.note.note-12 {
  height: 108px;
}
.note.note-13 {
  height: 183px;
}
.note.note-14 {
  height: 178px;
}
.note.note-15 {
  height: 173px;
}
.note.note-16 {
  height: 168px;
}
.note.note-17 {
  height: 163px;
}
.note.note-18 {
  height: 158px;
}
.note.note-19 {
  height: 153px;
}
.note.note-20 {
  height: 148px;
}
.note.note-21 {
  height: 143px;
}
.note.note-22 {
  height: 138px;
}
.note.note-23 {
  height: 133px;
}
.note.note-24 {
  height: 128px;
}
.note.note-25 {
  height: 123px;
}
.note.note-26 {
  height: 118px;
}
.note.note-27 {
  height: 113px;
}
.note.note-28 {
  height: 108px;
}
.note.note-29 {
  height: 103px;
}
.note.note-30 {
  height: 98px;
}

.stick {
  position: absolute;
  height: 117px;
  width: 22px;
  left: 100px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/stick.svg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 9999;
  transform-origin: 4px 50%;
  transform: rotate(-25deg);
  pointer-events: none;
}
.stick .glow-1, .stick .glow-2 {
  border-radius: 50%;
  background-color: rgba(255, 243, 178, 0.25);
  position: relative;
  animation-name: bonyonyon;
  animation-timing-function: linear;
  animation-play-state: paused;
  animation-iteration-count: infinite;
  transition: opacity 0.3s ease;
  opacity: 1;
}
.stick .glow-1.hidden, .stick .glow-2.hidden {
  opacity: 0;
}
.stick .glow-1 {
  width: 34px;
  height: 34px;
  left: -6px;
  top: -6px;
  z-index: 9997;
  animation-duration: 0.3s;
}
.stick .glow-2 {
  width: 28px;
  height: 28px;
  left: -3px;
  top: -37px;
  z-index: 9998;
  animation-duration: 0.2s;
  animation-delay: 0.1s;
}

body {
  background-image: url();
  background-color:0;
  background-size: auto 100%;
  display: flex;
  align-items: center;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  cursor: none;
}

@keyframes bonyonyon {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <button class="init-button">琴</button>
<div class="stick">
  <div class="glow-1 hidden"></div>
  <div class="glow-2 hidden"></div>
</div>
<div class="container">
  <div class="top-row">
    <div class="note-group group-of-two group-1">
      <div class="note note-1" data-frequency="207.65"><div>G#</div></div>
      <div class="note note-2" data-frequency="233.08"><div>A#</div></div>
    </div>
    <div class="note-group group-of-two group-2">
      <div class="note note-3" data-frequency="277.18"><div>C#</div></div>
      <div class="note note-4" data-frequency="311.13"><div>D#</div></div>
    </div>
    <div class="note-group group-of-three group-3">
      <div class="note note-5" data-frequency="369.99"><div>F#</div></div>
      <div class="note note-6" data-frequency="415.30"><div>G#</div></div>
      <div class="note note-7" data-frequency="466.16"><div>A#</div></div>
    </div>
    <div class="note-group group-of-two group-4">
      <div class="note note-8" data-frequency="554.37"><div>C#</div></div>
      <div class="note note-9" data-frequency="622.25"><div>D#</div></div>
    </div>
    <div class="note-group group-of-three group-5">
      <div class="note note-10" data-frequency="739.99"><div>F#</div></div>
      <div class="note note-11" data-frequency="830.61"><div>G#</div></div>
      <div class="note note-12" data-frequency="932.33"><div>A#</div></div>
    </div>
  </div>
  <div class="bottom-row">
    <div class="note note-13" data-frequency="196.00"><div>G</div></div>
    <div class="note note-14" data-frequency="220.00"><div>A</div></div>
    <div class="note note-15" data-frequency="246.94"><div>B</div></div>
    <div class="note note-16" data-frequency="261.63"><div>C</div></div>
    <div class="note note-17" data-frequency="293.66"><div>D</div></div>
    <div class="note note-18" data-frequency="329.63"><div>E</div></div>
    <div class="note note-19" data-frequency="349.23"><div>F</div></div>
    <div class="note note-20" data-frequency="392.00"><div>G</div></div>
    <div class="note note-21" data-frequency="440.00"><div>A</div></div>
    <div class="note note-22" data-frequency="493.88"><div>B</div></div>
    <div class="note note-23" data-frequency="523.25"><div>C</div></div>
    <div class="note note-24" data-frequency="587.33"><div>D</div></div>
    <div class="note note-25" data-frequency="659.25"><div>E</div></div>
    <div class="note note-26" data-frequency="698.46"><div>F</div></div>
    <div class="note note-27" data-frequency="783.99"><div>G</div></div>
    <div class="note note-28" data-frequency="880.00"><div>A</div></div>
    <div class="note note-29" data-frequency="987.77"><div>B</div></div>
    <div class="note note-30" data-frequency="1046.50"><div>C</div></div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script id="rendered-js" >
class Sound {

  constructor(context) {
    this.context = context;
  }

  setup() {
    this.oscillator = this.context.createOscillator();
    this.gainNode = this.context.createGain();

    this.oscillator.connect(this.gainNode);
    this.gainNode.connect(this.context.destination);
    this.oscillator.type = 'sine';
  }

  play(value) {
    this.setup();

    this.oscillator.frequency.value = value;
    this.gainNode.gain.setValueAtTime(0, this.context.currentTime);
    this.gainNode.gain.linearRampToValueAtTime(1, this.context.currentTime + 0.01);

    this.oscillator.start(this.context.currentTime);
    this.stop(this.context.currentTime);
  }

  stop() {
    this.gainNode.gain.exponentialRampToValueAtTime(0.001, this.context.currentTime + 1);
    this.oscillator.stop(this.context.currentTime + 1);
  }}



let context = new (window.AudioContext || window.webkitAudioContext)();


document.addEventListener('mousemove', cursor);
var stick = document.querySelector('.stick');
var glow1 = document.querySelector('.stick .glow-1');
var glow2 = document.querySelector('.stick .glow-2');
var notes = document.querySelectorAll('.note');

notes.forEach(note => {
  note.addEventListener('mouseenter', () => {
    playSound(note);
    showGlow();
    setTimeout(hideGlow, 300);
  });
  note.addEventListener('mouseleave', hideGlow);
  note.addEventListener('touchstart', () => {
    playSound(note);
    showGlow();
    setTimeout(hideGlow, 300);
  });
  note.addEventListener('touchend', hideGlow);
});

function playSound(note) {
  context.resume();
  let sound = new Sound(context);
  let value = note.dataset.frequency;
  sound.play(value);
  sound.stop();
}

function showGlow() {
  glow1.style.animationPlayState = "running";
  glow2.style.animationPlayState = "running";
  glow1.classList.remove('hidden');
  glow2.classList.remove('hidden');
}

function hideGlow() {
  glow1.style.animationPlayState = "paused";
  glow2.style.animationPlayState = "paused";
  glow1.classList.add('hidden');
  glow2.classList.add('hidden');
}

function cursor(e) {
  stick.style.top = e.clientY - 12 + "px";
  stick.style.left = e.clientX + 12 + "px";
}
//# sourceURL=pen.js
    </script>

  

</body>

</html>
 
